import React, { useState, useEffect } from 'react';
import {
    Modal, Form, Input,
    // Select, Button, message
} from 'antd';
import YzhUploadImage from '@com/YzhUploadImage'
// import api from '@/api/apiList';
// const { Option } = Select
const AddDialog = (props) => {
    const [form] = Form.useForm();
    // const [loading, setLoading] = useState(false)
    const [state, setState] = useState({
        dialogAddVisible: props.dialogAddVisible,
        erpOptions: [],
        initialValues: {
            appCode: props.appCode || undefined,
            appImg: props.appImg || undefined,
            appLink: props.appLink || undefined,
            appName: props.appName || undefined,
            id: props.id || undefined,
            key: props.key || undefined
        }
    })
    useEffect(() => {
        setState({
            dialogAddVisible: props.dialogAddVisible
        })
        form.setFieldsValue({
            appCode: props.appCode || undefined,
            appImg: props.appImg || undefined,
            appLink: props.appLink || undefined,
            appName: props.appName || undefined,
            id: props.id || undefined,
            key: props.key || undefined
        })
    }, [props, form])
    const onFinish = () => {
        form
            .validateFields()
            .then((values) => {
                setAddDialog()
                props.setAddDialog(values)
            })
            .catch((info) => {
                console.log('Validate Failed:', info);
            });
    }
    const setAddDialog = () => {
        setState({ ...state, dialogAddVisible: false })
    }
    const { dialogAddVisible, initialValues = {} } = state
    return <Modal
        maskClosable={false}
        centered
        title={`${props.id ? '编辑' : '新增'}应用`}
        width={500}
        wrapClassName="yzh-modal"
        visible={dialogAddVisible}
        onOk={onFinish}
        afterClose={() => {
            form.resetFields();
            props.setAddDialog()
        }}
        onCancel={setAddDialog}>
        <Form
            name="basic"
            form={form}
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 20 }}
            labelAlign={'right'}
            initialValues={initialValues}
            autoComplete="off"
        >
            <Form.Item
                label="应用名称"
                name="appName"
                rules={[{ required: true, message: '请填写应用名称' }]}
            >
                <Input placeholder="请填写应用名称" maxLength={30} />
            </Form.Item>
            <Form.Item
                label="应用编码"
                name="appCode"
                rules={[{ required: true, message: '请填写应用编码' }]}
            >
                <Input placeholder="请填写应用编码" maxLength={50} />
            </Form.Item>
            <Form.Item
                label="链接地址"
                name="appLink"
                rules={[{ required: true, message: '请填写链接地址' }]}
            >
                <Input placeholder="请填写链接地址" maxLength={100} />
            </Form.Item>
            <Form.Item
                label="图片"
                name="appImg"
                style={{ marginBottom: 0 }}
                rules={[{ required: true, message: '请上传图片' }]}
            >
                <YzhUploadImage fileType={'png'} size={{ width: 100, height: 100 }} value={props.appImg} text="上传图片"
                    onChange={(url) => form.setFieldsValue({ appImg: url })} />
            </Form.Item>
        </Form>
    </Modal>
}

export default AddDialog;